<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>猫眼电影</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .movie-container {
                width: 750px;
                margin: 50px auto;
            }
            header {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .item {
                width: 25%;
                float: left;
                padding: 10px 15px;
            }
            .movie-list {
                margin: 0 -15px;
            }
            .img {
                position: relative;
            }
            .type {
                position: absolute;
                left: -2px;
                top: 3px;
                background: rgb(85, 85, 216);
                color: white;
                font-size: 12px;
                font-weight: bold;
                padding: 5px 10px;
                font-style: italic;
            }
            .buy {
                text-align: center;
                padding-top: 5px;
            }

            .clear{
                clear:both;
            }
        </style>
    </head>

    <body>
        <div id="root"></div>

        <script src="./js/react.development.js"></script>
        <script src="./js/react-dom.development.js"></script>
        <script src="./js/babel.min.js"></script>

        <script type="text/babel">
            // https://maoyan.com/?utm_source=meituanweb    猫眼电影热映榜
            let movies = [
                {
                    title: "怒火·重案",
                    img: "https://p1.meituan.net/moviemachine/51b193283628a62b85ba31ddc818ffde1560410.jpg@320w_440h_1e_1c",
                    rate: 9.5,
                    type: "3DIMAX",
                },
                {
                    title: "盛夏未来",
                    img: "https://p0.meituan.net/movie/056cce783466d9531ad736068c2e134e4100879.jpg@320w_440h_1e_1c",
                    rate: 9.2,
                    type: "2DIMAX",
                },
                {
                    title: "白蛇2：青蛇劫起x",
                    img: "https://p0.meituan.net/movie/cba20984e8e4423598913077e515b6121686728.jpg@320w_440h_1e_1c",
                    rate: 9.1,
                    type: "3D",
                },
                {
                    title: "中国医生",
                    img: "https://p1.meituan.net/movie/6876f0a4db61cab652fdc3d3ed14e94c4924473.jpg@320w_440h_1e_1c",
                    rate: 9.4,
                    type: "2D",
                },
                {
                    title: "贝肯熊2：金牌特工",
                    img: "https://p0.meituan.net/movie/70ed5d23afc45de7749dfafa2a8a1bd23977288.jpg@320w_440h_1e_1c",
                    rate: 8.9,
                    type: "3DIMAX",
                },
                {
                    title: "流浪猫鲍勃2：鲍勃的礼物",
                    img: "https://p1.meituan.net/mmdb/defb0d5f7845b6a2b3e7444e03afa5d7278009.jpg@320w_440h_1e_1c",
                    rate: 8.0,
                },
                {
                    title: "1921",
                    img: "https://p1.meituan.net/movie/63cb3dbbaff624b236b2e22b2ee59cff1553093.jpg@320w_440h_1e_1c",
                    rate: 9.4,
                },
                {
                    title: "新大头儿子和小头爸爸4：完美爸爸",
                    img: "https://p0.meituan.net/movie/df89b11a57dd63760a6c3d544c61e4a83956828.jpg@320w_440h_1e_1c",
                    rate: 8.8,
                },
            ];

            class MovieItem extends React.Component {

                static defaultProps = {
                    isShowBuy: true
                }

                render() {
                    let { title, type, img, isShowBuy } = this.props;
                    return (
                        <div className="item">
                            <div className="img">
                                <img width="100%" src={img} alt="" />
                                <div className="mask">
                                    <p></p>
                                </div>
                                {type && <div className="type">{type}</div>}
                            </div>

                            {isShowBuy && <div className="buy">{title}</div>}
                        </div>
                    );
                }
            }

            class App extends React.Component {
                render() {
                    return (
                        <div className="movie-container">
                            <header>
                                <h2>正在热映</h2>
                                <p>全部 &gt; </p>
                            </header>
                            <div className="movie-list">
                                {movies.map((item, index) => {
                                    return <MovieItem key={index} {...item} />;
                                })}
                            </div>
                            <div class="clear"></div>
                            <header>
                                <h2>经典电影</h2>
                            </header>

                            <div className="movie-list">
                                <div className="movie-list">
                                {movies.map((item, index) => {
                                    return <MovieItem key={index} {...item} isShowBuy={false} />;
                                })}
                            </div>
                            </div>
                        </div>
                    );
                }
            }

            ReactDOM.render(<App />, document.querySelector("#root"));
        </script>
    </body>
</html>
